<template>
<div class="wraper" style="height: 100%">
  <div class="container">
    <div class="main-content">
      <div class="row">
        <div class="col col-2">
          <a href="#" class="logo">
            <img src="./../../images/logo1.jpg" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 150px !important; height: 80px;margin-left: 15px;">
            <img src="./../../images/logo2.jpg" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 150px !important; height: 70px;">
          </a>
        </div>
        <div class="col col-7 align-middle">
          <div class="content">
            <div v-if="!user">
              <el-button type="primary" @click="toLogin" style="width:200px;">
                Login Your Account
              </el-button>
            </div>
            <div v-else>
              <el-form>
              <div style="display:flex;">
                  <el-form-item>
                    <el-button style="width:200px" type="success" @click="toMine">User Center</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button style="width:200px" type="info" @click="logout">Log Out</el-button>
                  </el-form-item>
              </div>
              </el-form>
            </div>
            <div>
              <el-button style="width:200px;" type="info" @click="mailDialog = true">Contact Us</el-button>
            </div>

            <el-dialog
              title="Tips"
              :visible.sync="mailDialog"
              width="30%">
              <span>
                Contact us, please send a message to this mailbox. We will deal with it as soon as we receive it.
                    <br><br>
                <span style="margin:0 auto;font-weight:bold;font-size:16px;">Mailbox:advancersin01@sina.com</span>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="mailDialog = false">Confirm</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
        <div class="col col-2 offset-9">
          <div class="row justify-content-md-center align-items-center right-clearfix" style="height: 100%;line-height: 100%; margin-right:10px">
            Today is {{time}}
          </div>
        </div>
      </div>
      <Content></Content>

    </div>
  </div>
  <footer class="foot">
    <p>
      <!-- © 1996-2018 期刊项目期刊项目 -->
    </p>
  </footer>
</div>
</template>

<script>
import axios from 'axios'
import { logout, isPefectInfo } from '@/api/user'
// import { getAllJournal } from '@/api/journal'
import Content from './components/Content'
export default {
  components: {
    Content
  },
  created () {
    this.initData()
    if (this.id !== '' || this.id !== null) {
      this.getUserInfo()
      this.isPerfect()
    }
  },
  data () {
    return {
      mailDialog: false,
      user: this.$store.state.user.id !== '' ? this.$store.state.user.id : localStorage.getItem('userid') }
  },
  computed: {
    time: function () {
      const date = new Date()
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    }
  },
  methods: {
    initData () {
      this.id = this.$store.state.user.id !== '' ? this.$store.state.user.id : localStorage.getItem('userid')
    },
    isPerfect () {
      isPefectInfo({
        userid: this.id
      }).then(res => {
        if (res.data.msg === '用户信息未完善') {
          this.$message.info('您的用户信息未完善，请前往个人中心进行资料完善')
        }
      }).catch(() => {

      })
    },
    getUserInfo () {
      console.log(this.$store.state.user.id)
      console.log(111)
      if (this.$store.state.user.id !== '' || this.$store.state.user.id === null) {
        axios.get(`api/user/getUser/${this.$store.state.user.id}`).then((res) => {
          this.email = res.data.data.email
        }).catch(() => {})
      } else {
        axios.get(`api/user/getUser/${this.id}`).then((res) => {
          this.email = res.data.data.email
        }).catch(() => {})
      }
    },
    toMine () {
      this.$router.push({path: '/user-center'})
    },
    logout () {
      logout().then(res => {
        localStorage.setItem('userid', '')
        localStorage.setItem('email', '')
        this.$message.success('log out successfully')
        this.$router.push('/login')
      })
    },
    toLogin () {
      this.$router.push({
        name: 'Login',
        params: {
          email: this.account,
          password: this.password
        }
      })
    },
    resetForm () {
      this.account = ''
      this.password = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
main-color = #4f5671;
.content {
  display: flex
  align-content center
  justify-content center
  .el-button {
    width auto
    min-width:80px;
    max-width: 160px;
    margin-left 8px;
    margin-top 10px;
  }
}
.foot{
  width: 98%;
  min-height: 120px;
  background-color: main-color;
  margin 10px auto
  margin-bottom 0
  display flex;
  direction columns
  justify-content space-between;
  >p{
    width 100%
    align-self flex-end
    background-color #222222
    margin-bottom 0
    color #cccccc
    text-align center
    font-size 10px;
    line-height 28px;
    height 28px
  }
}
@media (min-width: 1200px){
  .container {
      max-width: 1540px;
  }
}

.logo {
  background-color: white;
  display: flex;
}
.main-content{
  background-color: white;
  padding: 1em 1em
}
.right-clearfix .item{
  vertical-align: middle;

  display: table-cell;
  text-align: center;
}
.right-clearfix .item{
  color: #343a40;
  transition: all 0.3s;
}
.right-clearfix .item:hover{
  background-color: #343a40;
  color: white;
}
</style>
